<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue instance</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>

<div id="v-OnClick">
  <ol >
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
  <button @click="addItemAt">@click </button>
</div>

  <ul id="sayhi">
      <li v-on:click="say('hello!', $event)" style="background-color:blue;color:white;">点击当前行获取下一行</li>
      <li>li2</li>
      <li>li3</li>
  </ul>


</div>

<script>
  new Vue({
    el: '#sayhi',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      say: function (msg, event) {
        //获取点击对象
        var el = event.currentTarget;
        alert("当前对象的内容：" + $(el).text() );
      }
    }
  })

  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })

  var v_onClick = new Vue({
    el: '#v-OnClick',
    data: {
      groceryList: [
        { text: 'Vegetables' },
        { text: 'Cheese' },
      ]
    },
    methods: {
      addItemAt: function () {
        v_onClick.groceryList.push({text : "v-on:click"})
      }
    }
  })



</script>
</body>
</html>
